* {
    margin: 0;
    padding: 0
}

/*指定容器的大小*/
html,
body,
.layout {
    height: 100%;
    width: 100%;
}

/*主容器*/
.layout {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #f8f8f8;

    /*面包屑*/
    .layout-header {
        margin: 10px;
        height: 40px;
        line-height: 40px;
        background: #fff;
    }

    /*二级面包屑*/
    .layout-header-second {
        /*解决margin-top高度的问题*/
        margin: 0 10px 10px 10px;
        height: 40px;
        line-height: 40px;
        background: #fff;
    }

    /*内容区域*/
    .layout-content {
        display: flex;
        flex: 1 1 auto;
        overflow: auto;
        margin: 0 0 10px 10px;
        height: 100%;

        >div {
            background: #fff;
        }

        .layout-content-nav {
            width: 200px;
            overflow: auto;
        }

        .layout-content-list {
            flex: 1 1 auto;
            overflow-y: auto;
            margin: 0 10px;
        }

        /*内容与导航栏对调位置*/
        .layout-content-list-reverse {
            flex: 1 1 auto;
            overflow-y: auto;
            margin: 0 0px;
        }

        .layout-content-nav-reverse {
            width: 200px;
            overflow: auto;
            margin: 0 10px;
        }

        .layout-content-list-left {
            flex: 1 1 auto;
            overflow-y: auto;
            margin: 0px;
            width: 60%;
            box-shadow: #ccc 0px 0px 5px;
        }

        .layout-content-list-right {
            flex: 1 1 auto;
            overflow-y: auto;
            margin: 0 10px;
            box-shadow: #ccc 0px 0px 5px;

            .layout-content-list-right-split {
                height: 49%;
                margin-right: 0px;
                overflow-y: auto;
                box-shadow: #ccc 0px 0px 2px;
            }
        }
    }
}